<template>
  <div class="item" v-if="!pingLun">
    <div class="top">
      <p class="top-title">{{ tiezi.forumTitle }}</p>
      <el-button
        icon="el-icon-s-flag"
        type="warning"
        style="height:40px"
        v-if="tiezi.createUserId==userId?false:true"
        @click="openWant(tiezi)"
      >我想加入</el-button>
    </div>
    <div class="center">{{ tiezi.forumContent }}</div>
    <div class="bottom">
      <div class="time">
        <p style="margin-left:15px">发帖人：{{ tiezi.createBy }}</p>
        <el-tag size="mini" type="danger" v-show="tiezi.createUserId" style="margin-left: -25px;">作者</el-tag>
        <p style="margin-left: 15px;">{{ tiezi.createTime }}</p>
      </div>
      <el-button class="num" @click="openLun(tiezi.forumId)">
        <div style="margin-bottom:6px">
          <i class="el-icon-chat-dot-square" style="margin-right: 5px"></i>
          评论&nbsp
          <i href="#">&nbsp{{ tiezi.count }}条</i>
        </div>
      </el-button>
      <el-button
        type="danger"
        plain
        class="delete-item"
        v-if="tiezi.createUserId==userId?true:false"
        @click="deleteTie(tiezi)"
      >删除</el-button>
    </div>
    <el-dialog
      title="意向研究内容"
      :visible.sync="centerDialogVisible"
      width="40%"
      v-if="centerDialogVisible"
      center
      @close="wantNo()"
    >
      <span>
        <!--  -->
        <!--  @input="shuru(formLabelAlign.forumContent)" -->
        <el-input
          type="textarea"
          placeholder="请输入..."
          :rows="20"
          style="width:100%"
          @input="shuru(yanjiuContent)"
          v-model="yanjiuContent"
        ></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="wantNo()">取 消</el-button>
        <el-button type="primary" @click="wantSure()" :disabled="disabled">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUserId, getforumId, saveCommen, deleteTieZi } from "@/api2/luntan";
export default {
  props: {
    itemObj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      centerDialogVisible: false,
      dialogVisible: false,
      opens: false,
      disabled: true,
      yanjiuContent: "",
      images: "",
      pingLun: false,
      content: "",
      forumCommentIds: "",
      childComments: [],
      parentComment: {},
      rootParentId: "",
      userId: "",
      pid: "",
      wenzhang: [],
      tiezi: this.itemObj
    };
  },
  created() {
      this.getUsers();
  },
  mounted() {},
  methods: {
    //我想加入帖子
    openWant(e) {
      console.log(e);
      this.forumCommentIds = e.forumId;
      this.centerDialogVisible = true;
    },
    async wantSure() {
      const xmForumComment = {
        // openId: this.opensid,
        forumId: this.forumCommentIds,
        commentContent: this.yanjiuContent,
        isEnter: "1"
      };
      console.log(xmForumComment);
      const res = await saveCommen(xmForumComment);
      if (res.code == 0) {
        this.$message.success("评论成功");
        this.yanjiuContent = "";
        this.$emit("fatherMethod1");
        this.centerDialogVisible = false;
      }
    },
    wantNo() {
      this.yanjiuContent = "";
      this.centerDialogVisible = false;
    },
    shuru(e) {
      if (e !== "") {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    deleteTie(e) {
      console.log(e);
      this.forumIds = e.forumId;
      this.$confirm("确认删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res1 => {
          const forumId = e.forumId;
          deleteTieZi(forumId).then(res => {
            if (res.code == 0) {
              this.$message.success("删除成功");
              // this.getUsers();
              this.$emit("fatherMethod1");
              // this.getList(this.shenPi); //获取表格数据
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
      // formLabelAlign: { num: "", yijian: "", yuanyin: "" }
    },
    // pinglun
    async submitForm2() {
      this.$confirm("确认发布吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res1 => {
          const xmForumComment = {
            // openId: this.opensid,
            pid: 0,
            commentContent: this.content
          };
          saveCommen(xmForumComment).then(res => {
            if (res.code == 0) {
              this.$message.success("发布成功");
              this.dialogVisible = false;
              // this.getList(this.shenPi); //获取表格数据
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
      // formLabelAlign: { num: "", yijian: "", yuanyin: "" }
    },
    async openLun(e) {
      console.log(e);
      this.pid = e;
      const res = await getforumId(e);
      this.wenzhang = res.data.xmForumCommentList;
      console.log(res);
      this.pingLun = true;
      this.$emit("fatherMethod2", res.data);
    },
    async getUsers(e) {
      if (this.tiezi.xmForumCommentList) {
        this.tiezi.xmForumCommentList.forEach(item => {
          if (item.children) {
            this.opens = true;
            this.childComments = item.children;
            this.parentComment = item;
            this.childComments = item.forumCommentId;
          }
        });
      }
      const res = await getUserId();
      this.userId = res.data.id;
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  border-bottom: 1px solid #ccc;
  .top {
    display: flex;
    justify-content: space-between;
    .top-title {
      font-size: 18px;
      margin-right: 20px;
      font-weight: bold;
    }
  }
  .center {
    font-size: 16px;
    color: #454545;
    width: 90%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 超出几行省略 */
    overflow: hidden;
  }
  .bottom {
    font-size: 14px;
    margin: 10px 10px 10px 0px;
    color: #aaa;
    display: flex;
    p {
      margin-right: 30px;
      a {
        text-decoration: underline;
      }
    }
  }
}
.time {
  min-width: 38vh;
  height: 36px;
  display: flex;
  background: #f5f5f5;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  color: #666666;
  text-align: center;
  align-items: center;
  line-height: 10px;
  margin-right: 10px;
}
.num {
  margin-top: 1px;
  height: 36px;
  line-height: 10px;
  align-items: center;
  background-color: #e2eefe;
  border: none;
  color: #3b95ff;
}
.num :hover {
  color: rgb(140, 99, 237);
}
.delete-item {
  height: 36px;
  opacity: 0.8;
}
</style>
